<template>
  <div class="page-style">
    <el-row>
      <el-col :span="14" :offset="5">
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-form-item label="授权名" prop="anent_name">
            <el-input v-model="form.anent_name" />
          </el-form-item>
          <el-form-item label="微信号" prop="anent_login_name">
            <el-input v-model="form.anent_login_name" />
          </el-form-item>
          <el-form-item label="手机号" prop="brand_phone">
            <el-input v-model="form.brand_phone" />
          </el-form-item>
          <el-form-item label="身份证" prop="people_card_num">
            <el-input v-model="form.people_card_num" />
          </el-form-item>
          <el-form-item label="省市区" prop="addressArr">
            <el-cascader
              v-model="form.addressArr"
              :options="options"
              @change="handleChange"
            />
          </el-form-item>
          <el-form-item label="收货地址" prop="address">
            <el-input v-model="form.address" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="card-title">说明</span>
          </div>
          <ul>
            <li>上级代理授权代码不填时,上级直接归到总部</li>
            <li>会自动生成代理商后台的登陆帐号与密码</li>
            <li>帐号为：微信号</li>
            <li>密码为：手机号后6位</li>

          </ul>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { regionDataPlus, CodeToText } from 'element-china-area-data'
import { checkPhoneNumber, IdentityCodeValid } from '@/utils/rules'
import { operationAgent } from '@/api/agent'

export default {
  data() {
    return {
      form: {
        anent_name: '',
        anent_login_name: '',
        anent_login_pass_word: '',
        brand_phone: '',
        people_card_num: '',
        address: '',
        status: 1,
        sheng: '',
        shi: '',
        qu: '',
        addressArr: [],
        brand_head_img: ''
      },
      agentLev: '',
      activeNames: '',
      options: regionDataPlus,
      addressValue: [],
      rules: {
        anent_name: [
          { required: true, message: '请输入授权明', trigger: 'blur' }
        ],
        anent_login_name: [
          { required: true, message: '请输入正确的微信号码', trigger: 'blur' }
        ],
        brand_phone: [
          { required: true, validator: checkPhoneNumber, trigger: 'blur' }
        ],
        people_card_num: [
          { required: true, validator: IdentityCodeValid, trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入收货地址', trigger: 'blur' }
        ],
        addressArr: [
          { required: true, message: '请选择省市区', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    handleChange(val) {
      console.log(val)
      const arr = []
      for (const i in val) {
        arr.push(CodeToText[val[i]])
      }
      this.form.sheng = arr[0]
      this.form.shi = arr[1]
      this.form.qu = arr[2]
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log('submit!')
          this.form.anent_login_pass_word = this.form.brand_phone.slice(5)
          console.log(this.form)
          const data = {
            type: 1,
            pro: this.form
          }
          this.operationAgentFun(data)
        } else {
          this.$message.info('请完善必填信息！')
        }
      })
    },
    operationAgentFun(data) {
      operationAgent(data).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.$message.success('代理添加成功！')
          this.form = {
            anent_name: '',
            anent_login_name: '',
            anent_login_pass_word: '',
            brand_phone: '',
            people_card_num: '',
            status: 1,
            address: '',
            sheng: '',
            shi: '',
            qu: '',
            addressArr: [],
            brand_head_img: ''
          }
        } else if (res.code === 400) {
          this.$message.warning('代理添加失败，请重新提交！')
        } else if (res.code === 4001) {
          this.$message.warning('微信号重复，请重新录入新的微信号！')
          this.form.brand_login_name = ''
        } else if (res.code === 4002) {
          this.$message.warning('手机号码重复，请重新录入！')
          this.form.brand_phone = ''
        } else if (res.code === 4003) {
          this.$message.warning('身份证号码重复，请重新录入！')
          this.form.people_card_num = ''
        } else {
          this.$message.warning('代理添加失败，请重新提交！')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  li {
    font-size: 12px;
    color: #aaa;
    line-height: 24px;
  }
  ul {
    margin:0;
    padding:0 10px;
  }
  .card-title {
    font-size: 14px;
    color: #aaa;
  }
</style>
